<template>
<div>
<div class="content">
    <!-- <h2>{{shop_id}}</h2> -->
    <div class="login">
      <div v-if="!is_login">
        <h2>请登录</h2>
        <text>账号：</text>
        <a-input v-model:value="formInline.name" placeholder="请输入用户名" />
        <text>密码：</text>
        <a-input-password v-model:value="formInline.pwd" placeholder="请输入密码"/>
        <a-button style="margin-top: 30px;" type="primary" @click="login">登录</a-button>
      </div>
      <div style="margin-top: 50px;" v-if="is_login">
        <h2>欢迎回来！</h2>
        <h2>{{shop_id}} 号商店</h2>
        <h2>管理者</h2>
        <a-button type="primary" @click="logout">退出登录</a-button><br>
      </div>
      <div class="bottom">
        <a-button v-if="!is_login" type="link" @click="openReg">没有账号？注册一个</a-button>
        <a-button v-if="is_login" type="link" @click="forget">忘记密码？</a-button>
      </div>
    </div>
    
  </div>
    <a-modal v-model:open="open_reg" title="注册" @ok="register" @cancel="reg_cancel">
      <div>
        <text>用户名</text>
        <a-input v-model:value="formInline.name" placeholder="请输入内容" />
        <text>密码</text>
        <a-input v-model:value="formInline.pwd" placeholder="请输入内容" />
        <text>商店id</text>
        <a-input v-model:value="formInline.shop_id" placeholder="请输入内容" />
      </div>
    </a-modal>
</div>
  

  
</template>


<script>
import axios from 'axios';
import Qs from 'qs';

export default {
  data() {
    return {
      shop_id: 0,
      open_reg: false,
      formInline: {
        name: "",
        pwd: "",
        shop_id: 0
      },
      is_login: false

    };
  },
  methods: {
    login(){
      let tmp = {...this.formInline};
      tmp["need_parse"] = 1;
      let obj = Qs.stringify(tmp);
      axios.post('/user/login', obj, {headers:{'Content-Type':'application/x-www-form-urlencoded'}}).then((res)=>{
        console.log('res: ', res);
        if (res.data.msg == "success")
        {
          if (res.data.is_shop_owner == 0)
          {
            alert("您不是商家，请重新登录！");
            return;
          }
          this.$store.commit('set_user_id', res.data.user_id);
          this.$store.commit('set_shop_id', res.data.shop_id);
          this.$store.commit('set_is_login', true);
          this.shop_id = res.data.shop_id
          this.is_login = true;
          alert("登录成功");
        }
        else if (res.data.msg == "error, name or pwd err")
        {
          alert("用户名或密码错误");
        }
        else
        {
          alert("登录失败");
        }
      });
    },
    register(){
      let tmp = {...this.formInline};
      tmp["need_parse"] = 1;
      tmp["is_shop_owner"] = 1;
      let obj = Qs.stringify(tmp);
      console.log('obj: ', obj);
      axios.post('/user/register', obj, {headers:{'Content-Type':'application/x-www-form-urlencoded'}}).then((res)=>{
        console.log('res: ', res);
        if (res.data.msg == "success")
        {
          alert("注册成功");
        }
        else if (res.data.msg == "username already exists")
        {
          alert("用户名已存在!");
        }
        else if (res.data.msg == "shop_id does not exist")
        {
          alert("店铺不存在!");
        }
        else {
          console.log("res.data.msg: ", res.data.msg);
          alert("注册失败");
        }
      });
    },

    forget(){
      let tmp = {...this.formInline};
      tmp["need_parse"] = 1;
      let obj = Qs.stringify(tmp);

      axios.post('/user/forget', 
        obj, 
        {headers:{'Content-Type':'application/x-www-form-urlencoded'}
      }).then((res)=>{
        console.log('res: ', res);
        if (res.data.msg == "success")
        {
          alert("找回成功！");
        }
        else if (res.data.msg == "username not exists")
        {
          alert("用户名不存在!");
        }
        else {
          alert("找回失败！");
        }
      });
    },

    logout(){
      this.formInline = {
        name: "",
        pwd: "",
      },

      this.$store.commit('set_user_id', 0);
      this.$store.commit('set_shop_id', 0);
      this.$store.commit('set_is_login', false);
      this.is_login = false;
      this.shop_id = 0;
      alert("已退出登录！");
    },

    reg_cancel()
    {
      // 清空用户表单
      this.formInline = {
        name: "",
        pwd: "",
        shop_id: 0
      };
      this.open_reg = false;
    },
    openReg()
    {
      this.open_reg = true;
      console.log("open_reg: ", this.open_reg);
    }
  },

  mounted: function () {
    console.log("is_login: ", this.is_login);
    this.is_login = this.$store.state.is_login;
    this.shop_id = this.$store.state.shop_id;
  },
};
</script>

<style>
.content{
  height:91vh;
  display: flex;
  justify-content: center;
  background-color: rgb(6, 168, 238);
}

.login {
  position: relative;
  height: 50%;
  width: 40%;
  /* display: flex; */
  /* flex-wrap: wrap; */
  /* align-items: center; */
  margin-top: 60px;
  background-color: white;
  border-radius: 12px;
}

.bottom {
  position: absolute;
  bottom: 0;
  right: 0;
}
</style>